<template>
  <div style="height: 100%;">
    <el-container v-if="hasPerm" style="height: 100%;" class="dealBaseHome">
      <el-header v-loading="loading" class="app-header">
        <div class="titlebar">
          <div class="titlebar-image">
            <UploadAvatar :logo-info="logoInfo" @appendData="uploadImg($event)" />
          </div>
          <div class="titlebar-title">
            <div class="title">
              <div class="tit">
                <el-tooltip placement="bottom">
                  <div slot="content">{{ dealName }}</div>
                  <el-button class="tipText" type="text">
                    <p>{{ dealName }}</p>
                  </el-button>
                </el-tooltip>
              </div>
              <!--项目关键数据-->
              <div class="header-msg" style="display: flex;align-items: center;">
                <div class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        {{ $t('项目负责人') }}
                      </div>
                      <el-button class="tipText" type="text"> {{ $t('负责人') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div class="text">{{ dealKeyInfo.personCharge.nickName || $t('暂无数据') }}</div>
                </div>
                <div class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        <span v-html="$t('根据现金流自动计算<br>')" />
                      </div>
                      <el-button class="tipText" type="text">
                        {{ $t('IRR') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div v-if="dealKeyInfo.lastIrr" class="text" :title="dealKeyInfo.lastIrr">{{ dealKeyInfo.lastIrr.toFixed(2) }}%</div>
                  <div v-else class="text">{{ $t('暂无数据') }}</div>
                </div>

                <!-- 子基金评分 -->
                <div v-if="dealKeyInfo.dealType === 'bf'" class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        <span v-html="$t('子基金评分最新评估结果<br>')" />
                      </div>
                      <el-button class="tipText" type="text">
                        {{ $t('子基金评分') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div v-if="dealKeyInfo.evaluationScore" class="text">{{ dealKeyInfo.evaluationScore }}</div>
                  <div v-else class="text">{{ $t('暂无数据') }}</div>
                </div>

                <div class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        {{ $t('投资主体中协议付款金额合计') }}
                      </div>
                      <el-button class="tipText" type="text">
                        {{ $t('协议金额') }}{{ $t('金额单位') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div class="text" :title="moneyFormat(dealKeyInfo.totalAgreementMoney, 'w') || ''">{{ moneyFormat(dealKeyInfo.totalAgreementMoney, 'w',2,true) || $t('暂无数据') }}</div>
                </div>

                <div class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        {{ $t('现金流中业务类型为项目付款的实际现金流') }}
                      </div>
                      <el-button class="tipText" type="text">
                        {{ $t('付款金额') }}{{ $t('金额单位') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div class="text" :title="moneyFormat(dealKeyInfo.totalPayment, 'w') || ''">{{ moneyFormat(dealKeyInfo.totalPayment, 'w',2,true) || $t('暂无数据') }}</div>
                </div>

                <!-- <div class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        {{ $t('付款金额 / 协议金额') }}
                      </div>
                      <el-button class="tipText" type="text">
                        {{ $t('支付比例') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div v-if="moneyFormat(dealKeyInfo.payRatio, '')" class="text">{{ moneyFormat(dealKeyInfo.payRatio, '') + '%' }}</div>
                  <div v-else class="text">{{ $t('暂无数据') }}</div>
                </div> -->

                <div class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        {{ $t('流入方向的实际现金流金额汇总') }}
                      </div>
                      <el-button class="tipText" type="text">
                        {{ $t('累计回款') }}{{ $t('金额单位') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div class="text" :title="moneyFormat(dealKeyInfo.totalReceivable, 'w') || ''">{{ moneyFormat(dealKeyInfo.totalReceivable, 'w',2,true) || $t('暂无数据') }}</div>
                </div>

                <div class="content">
                  <div class="text">
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">
                        {{ $t('流入方向且流入类型为收益的现金流金额汇总') }}
                      </div>
                      <el-button class="tipText" type="text">
                        {{ $t('累计收益') }}{{ $t('金额单位') }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div class="text" :title="moneyFormat(dealKeyInfo.totalEarnings, 'w') || ''">{{ moneyFormat(dealKeyInfo.totalEarnings, 'w',2,true) || $t('暂无数据') }}</div>
                </div>
                <div v-if="dealKeyInfo.assetRating" class="content" style="text-align: center;">
                  <div class="text">
                    <el-button class="tipText" type="text">
                      {{ $t('评级') }}
                    </el-button>
                  </div>
                  <div class="text"><span :class="'grade-' + dealKeyInfo.assetRating" /></div>
                </div>
              </div>
              <div class="tab-change">
                <Internationalization v-show="dealName === '国际化'" />
              </div>
              <div class="btns">
                <!-- 关注 -->
                <Focus :source-id="busId" :source-name="dealName" focus-type="deal" />
                <backTop />
              </div>
            </div>
          </div>
        </div>
      </el-header>

      <div class="page-component__scroll">
        <fullView
          ref="fullView"
          :bus-id="this.$route.query.id"
          :bus-type="busType"
          :child-left-menu="menuList"
          :bus-name="dealName"
          :default-active="cur"
          :default-opends="openMenu"
        />
      </div>
    </el-container>
    <not-fund v-else bus-type="deal" :person-charge="dealKeyInfo.personCharge.nickName" />
  </div>
</template>

<script>
import fullView from '@/components/fullView'
import Focus from '@/components/Focus'
import UploadAvatar from '@/components/Avatar/uploadAvatar'

import { uploadAvatar } from '@/api/system/user'
import { getDealBase, getKeyInformation, getMenuId } from '@/api/base/deal/dealBase'
import { childMenuListById	} from '@/api/system/menu'
import { getPermission } from '@/api/system/dealRole/dealRole'
import NotFund from '@/views/error/deal_401'
import { getConfigKey } from '@/api/system/config'
export default {
  components: {
    fullView,
    Focus,
    UploadAvatar,
    NotFund
  },
  data() {
    return {
      // 项目类型
      dealTypeOptions: [],
      loading: false,
      busId: this.$route.query.id,
      busType: 'deal',
      imageUrl: '',
      menuList: [],
      hasPerm: true,
      cur: '',
      // 项目关键信息
      dealKeyInfo: {
        // 项目负责人
        personCharge: {
          nickName: undefined
        }
      },
      // 项目状态
      dealStatus: undefined,
      // logo
      logoInfo: '',
      // name
      dealName: '',
      childLeftMenu: [],
      openMenu: [],
      menuLayout: 'default'
    }
  },
  created() {
    this.busId = this.$route.query.id
    this.menuLayout = this.$store.state.app.menuLayout ? this.$store.state.app.menuLayout : 'default'
    // 查询项目类型字典
    this.getDicts('deal_type').then(response => {
      this.dealTypeOptions = response.data
    })
    // 获取项目关键信息
    this.getDealKeyInfo()
    this.getMenuList()
    // 获取项目表单配置
    this.nolConfig()
  },
  mounted: function() {
    this.$nextTick(() => {
      this.getDeal()
    })
  },
  methods: {
    async nolConfig() {
      var config = {}
      var configId = {}
      var dealTypes = ['equity', 'debt', 'bf', 'anxin', 'KH', 'SAAS', 'market', 'HZHB', 'self_dev']
      localStorage.setItem('configFormDealType', dealTypes)
      config = await getConfigKey('deal_base_form')
      if (config.msg === 'configForm') {
        configId = await getConfigKey('dealTempletId')
        localStorage.setItem('dealBaseFormFlag', config.msg)
        localStorage.setItem('dealBaseFormTempletId', configId.msg)
      } else {
        localStorage.setItem('dealBaseFormFlag', null)
        localStorage.setItem('dealBaseFormTempletId', null)
      }
    },
    /** logo */
    getDeal() {
      this.loading = true
      getDealBase(this.busId).then(response => {
        if (response.code === 200) {
          this.logoInfo = response.data.logoInfo
          this.dealName = response.data.dealName
          this.dealStatus = response.data.dealStatus
          // 浏览器标题
          document.title = response.data.dealName
          // 项目类型 （表单配置切换页面使用）
          sessionStorage.setItem('dealBaseFormDealType' + this.$route.query.id, response.data.dealType)
          this.loading = false
        }
      })
    },
    // 获取项目关键信息
    getDealKeyInfo() {
      getKeyInformation(this.busId).then(response => {
        this.dealKeyInfo = response.data
        console.log('this.dealKeyInfo ', this.dealKeyInfo)
      })
    },
    // 获取项目菜单 流程 - 投前 - 投后
    async getMenuList() {
      // 获取MenuKey
      var menuId = await getMenuId(this.busId)
      console.log(menuId, '菜单DI')
      // 菜单列表
      childMenuListById(menuId.data).then(response => {
        // 获取当前登录人权限
        getPermission(this.busId, 'deal', menuId.data).then(res => {
          var permissions = JSON.parse(JSON.stringify(this.$store.state.user.permissions))
          if (res.data && res.data.hasPerm) {
            res.data.notHasPermi.forEach(item => {
              permissions.forEach((p, i) => {
                if (item === p) {
                  permissions.splice(i, 1)
                }
              })
            })
            res.data.hasPerm.forEach(perm => {
              if (perm) {
                permissions.push(perm)
              }
            })
            this.$store.commit('SET_PERMISSIONS', permissions)
            // this.menuList.forEach(item => {
            //   if (item.menuKey === 'deal_data_after') {
            //     item.children = res.data.menus
            //   }
            // })
            this.menuList = res.data.menus

            this.hasPerm = this.menuList.length > 0
            // this.$route.query.menuKey === 'deal_pool' || this.$route.query.menuKey === 'deal_before' || this.$route.query.menuKey === 'deal_suspend'
            // 修改根据项目状态跳转页面
            if (this.dealStatus !== 'TH' && this.dealStatus !== 'TC') {
              if (this.menuLayout === 'sheet') {
                this.active('deal_data_after')
              } else {
                this.active(this.menuList && this.menuList.length > 0 ? this.menuList[0].menuKey : 'deal_process')
              }
            } else {
              this.active('deal_data_after')
            }
          } else {
            this.menuList = response.rows
            // 修改根据项目状态跳转页面
            // this.$route.query.menuKey === 'deal_pool' || this.$route.query.menuKey === 'deal_before' || this.$route.query.menuKey === 'deal_suspend'
            console.log(this.dealStatus, '状态')
            if (this.dealStatus !== 'TH' && this.dealStatus !== 'TC') {
              if (this.menuLayout === 'sheet') {
                this.active('deal_data_after')
              } else {
                this.active('deal_process')
              }
            } else {
              this.active('deal_data_after')
            }
          }

          var arr = []
          this.menuList.forEach(item => {
            arr.push(item.id)
          })

          this.openMenu = arr
        })
      })
    },
    // 流程投前投后重复点击
    changeMiniMenu(el, val) {
      if (el.target.tagName === 'INPUT') return
      document.title = this.dealName
      this.load(val)
    },
    // 图表
    active(item) {
      // this.cur = item
      this.load(item)
    },
    load(val) {
      var defaultPath = ''
      this.menuList.forEach(v => {
        if (v.menuKey === val) {
          // this.childLeftMenu = v.children
          // 默认展示页面
          this.cur = v.id
          defaultPath = v.component
        }
      })
      if (val === 'deal_data_before' || val === 'deal_data_after') {
        this.$nextTick(() => {
          if (this.$refs.fullView?.importFormPath !== undefined) {
            if (this.menuLayout === 'sheet' && this.busType === 'deal') {
              var menuId = this.childLeftMenu[0].id
              this.$refs.fullView.$refs.asideMenu.activeIndex = menuId
              this.$refs.fullView.handleSelect(menuId)
            } else {
              this.$refs.fullView.importFormPath(defaultPath)
            }
            if (defaultPath) {
              this.$refs.fullView.$refs.asideMenu.activeIndex = ''
            } else {
              this.$refs.fullView.listComponent()
            }
          }
        })
      } else if (defaultPath === '') {
        // 默认选中第一个菜单
        if (!this.isEmpty(this.menuList)) {
          if (this.menuList[0].menuKey.includes('process')) {
            this.active('deal_process')
          } else {
            this.active('deal_data_after')
          }
        }
      }
    },
    // 上传图片
    uploadImg(data) {
      const formData = new FormData()
      formData.append('avatarfile', data)
      formData.append('id', this.$route.query.id)
      uploadAvatar(formData).then(response => {
        if (response.code === 200) {
          this.logoInfo = response.msg
          this.msgSuccess(this.$t('修改成功'))
        } else {
          this.msgError(response.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
  .phaseBefore .box-card-list {
    margin-top: 0px;
  }
</style>
